<template>
  <div class="login-container">
    <div class="login-top">
      <span>人机增强多智能体量化评估与演化</span>
    </div>
    <div class="general-flex-center login-main">
      <span class="title">登录</span>
      <el-form ref="loginFormRef" hide-required-asterisk :model="loginForm" :rules="rules" class="login-form"
        style="margin-top:20px;">
        <el-input v-model="loginForm.username" placeholder="用户名" style="width:330px" />
        <el-input type="password" v-model="loginForm.password" placeholder="密码" style="width:330px" />
        <span v-show="dialogVisible" class="tip">用户名或密码错误</span>
        <el-button type="text" class="login-button" @click="handleSubmit">登录</el-button>
      </el-form>
    </div>
  </div>
  <!-- <el-container style="height: 100vh; overflow: hidden">
    <el-header class="custom-header">
      <span style="color: rgb(245, 245, 245)">人机增强多智能体量化评估与演化</span>
    </el-header>
    <el-main style="background-color: rgb(33, 108, 157)" class="main-content">
      <el-row style="margin-top:200px;">
        <el-col :span="8">

        </el-col>
        <el-col :span="8">
          <el-card class="center-card">
            <div slot="header" class="clearfix">
              <span style="margin-left:180px;">登录</span>
            </div>
            <el-form ref="loginFormRef" :model="loginForm" :rules="rules" label-width="120px" style="margin-top:20px;">
              <el-form-item label="用户名" prop="username" style="color: rgb(96,235,232);">
                <el-input v-model="loginForm.username" style="width:260px;" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginForm.password" style="width:260px;" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSubmit">登录</el-button>
                <el-button @click="handleReset">取消</el-button>
              </el-form-item>
            </el-form>
            <el-dialog v-model="dialogVisible" title="提示" width="30%">
              <span>用户名或密码错误</span>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="dialogVisible = false">确定</el-button>
                </span>
              </template>
</el-dialog>
</el-card>
</el-col>
</el-row>
</el-main>
</el-container> -->
</template>

<script lang="ts" setup>
import { computed, defineComponent, onMounted, ref, watch } from "vue";
import type { ImageProps } from "element-plus";
import axios from "axios";
import { useRouter } from 'vue-router'
const router = useRouter()
// 响应式数据  
const loginForm = ref({
  username: '',
  password: ''
});

const dialogVisible = ref(false)
const handleSubmit = () => {
  if (loginForm.value.username === 'admin' && loginForm.value.password === '123456') {
    router.push('/mainbox')
  } else {
    dialogVisible.value = true
  }
}

// 验证规则（这里只是示例，并未实际添加验证逻辑）  
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
};

</script>

<style scoped lang="scss">
// ::v-deep .el-form-item__label {
//   color: rgb(94, 234, 231);
// }

// .el-form-item {
//   margin-left: -30px;
// }

// .main-content {
//   height: 100vh;
//   background: url('@/assets/backgroud.png') no-repeat center center / cover;
// }

// .center-card {
//   color: rgb(245, 245, 245);
//   background-color: rgb(26, 68, 94);
//   border-width: 0;

// }

// .custom-header {
//   background-color: rgb(26, 68, 94);
//   padding-top: 15px;
// }


// .el-main {
//   --el-main-padding: 10px;
// }

.login-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  align-items: center;
  background: url('@/assets/login_bg.png') no-repeat center center / cover;

  .login-top {
    width: 100%;
    position: absolute;
    background: url('@/assets/login_top_bg.png') no-repeat center center / cover;
    padding: computeVw(30) computeVh(50);

    span {
      font-weight: bold;
      font-size: computeVw(30);
      color: #F3FFF8;
      line-height: computeVh(40);
      text-shadow: 0px 3px 0px rgba(0, 85, 99, 0.75);
    }
  }

  .login-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: computeVw(420);
    padding: 30px 0 30px 0;
    flex-direction: column;
    background-color: rgba(10, 24, 24, 0.8);
    border-radius: 4px;
    border: 1px solid #0BB5AF;

    .title {
      font-weight: bold;
      font-size: 24px;
      color: #F3FFF8;
      margin-bottom: 5px;
    }

    .login-form {
      height: 180px;
      width: 330px;
      display: flex;
      flex-direction: column;

      ::v-deep .el-input__inner {
        color: #F3FFF8;
        background-color: #0A1818;
        border-radius: 0;
      }

      ::v-deep .el-input__wrapper {
        background-color: #0A1818;
        box-shadow: 0 0 0 1px #3F8893 inset;
        margin-bottom: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
      }

      .tip {
        color: #00C3AC;
      }

      .login-button {
        width: 330px;
        color: #fff;
        background: #00C3AC;
        border-radius: 4px;
        margin-top: 20px;
      }
    }
  }
}
</style>